<!--
 * @Description  : 
 * @Author       : zhao
 * @Date         : 2022-09-21 15:53:23
 * @LastEditors  : zhao
 * @LastEditTime : 2022-10-20 11:11:38
-->
<!--  -->
<template>
	<div class="main">
		<el-card class="box-card" style="padding: 20px">
			<ztitle :name="'燃气管线信息台账'" />
			<el-form ref="queryForm" :model="listQuery" :inline="true" label-width="110px">
				<el-form-item label="城市： ">
					<el-input style="width: 270px" v-model="listQuery.productId" placeholder="城市" clearable size="small"></el-input>
				</el-form-item>
				<el-form-item label="燃气企业类型：">
					<el-input style="width: 270px" v-model="listQuery.name" placeholder="燃气企业类型" clearable size="small"></el-input>
				</el-form-item>
				<el-form-item label="燃气企业：">
					<el-input style="width: 270px" v-model="listQuery.name" placeholder="燃气企业" clearable size="small"></el-input>
				</el-form-item>
				<el-form-item label="区域：">
					<el-input style="width: 270px" v-model="listQuery.name" placeholder="区域" clearable size="small"></el-input>
				</el-form-item>
				<el-form-item label="请输入：">
					<el-input style="width: 270px" v-model="listQuery.name" placeholder="管道编码/名称/区域类型等" clearable size="small"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>

			<el-row :gutter="10" class="mb8">
				<el-col :span="1.5">
					<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleBatchImport">批量导入</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleExport">导出</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
				</el-col>
				<!-- <el-col :span="1.5">
					<el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate(rowsData)">修改</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete(rowsData)">删除</el-button>
				</el-col> -->
			</el-row>
			<el-row :gutter="20">
				<el-col :span="18">
					<el-table ref="productTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" border>
						<el-table-column type="selection" width="60" align="center"></el-table-column>
						<el-table-column label="行政区划代码" width="120" align="center">
							<template slot-scope="scope">{{ scope.row.region }}</template>
						</el-table-column>
						<el-table-column label="所属企业" align="center">
							<template slot-scope="scope">{{ scope.row.ent_code }}</template>
						</el-table-column>
						<el-table-column label="管线编码" width="100" align="center">
							<template slot-scope="scope">{{ scope.row.code }}</template>
						</el-table-column>

						<el-table-column label="管线外部编码" width="120" align="center">
							<template slot-scope="scope">{{ scope.row.code_extsys }}</template>
						</el-table-column>
						<el-table-column label="名称" width="100" align="center">
							<template slot-scope="scope">{{ scope.row.name }}</template>
						</el-table-column>
						<el-table-column label="竣工或改造日期" width="150" align="center">
							<template slot-scope="scope">{{ scope.row.cst_date }}</template>
						</el-table-column>
						<el-table-column label="区域类型" width="100" align="center">
							<template slot-scope="scope">{{ scope.row.area_type }}</template>
						</el-table-column>
						<el-table-column label="压力等级" width="100" align="center">
							<template slot-scope="scope">{{ scope.row.pressure }}</template>
						</el-table-column>
						<el-table-column label="管道长度" width="100" align="center">
							<!-- <template slot-scope="scope">{{ scope.row.length }}</template> -->
						</el-table-column>

						<el-table-column label="操作" width="120" align="center" fixed="right">
							<template slot-scope="scope">
								<p class="handleP">
									<i class="el-icon-document cursor" @click="handleUpdate([scope.row])"></i>
									<img src="../../assets/img/guandao.png" @click="handlePipeline([scope.row])" class="cursor" alt="" />
									<i class="el-icon-delete cursor" @click="handleDelete([scope.row])"></i>
								</p>
							</template>
						</el-table-column>
					</el-table>

					<el-pagination
						style="padding: 20px 10px 0px"
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						layout="total, sizes,prev, pager, next,jumper"
						:page-size="listQuery.pageSize"
						:page-sizes="[5, 10, 15]"
						:current-page.sync="listQuery.pageIndex"
						:total="total"
					>
					</el-pagination>
				</el-col>
				<el-col :span="6">
					<zmap style="width: 100%; height: 500px" :mapId="'mapId1'" />
				</el-col>
			</el-row>
		</el-card>
		<dialog_pipeline :dialogVisible_pipeline="dialogVisible_pipeline" @handleClose="handleClose" />
	</div>
</template>

<script>
import ztitle from '@/components/ztitle';
import zmap from '@/components/map';
import dialog_pipeline from './dialog_pipeline/dialog_pipeline.vue';
import * as moment from 'moment';
export default {
	name: 'zpipeline',
	components: { ztitle, zmap, dialog_pipeline },
	data() {
		return {
			single: true,
			multiple: true,
			// 遮罩层
			loading: true,

			list: [
				{
					region: '0215',
					ent_code: '廊坊新奥燃气有限公司',
					code: '52343222',
					code_extsys: 'DP5423434',
					name: '北环线',
					cst_date: '2006-05-23',
					area_type: '城镇',
					pressure: '中压',
					length: '1.24 km',
				},
			],
			listQuery: {
				pageIndex: 1,
				pageSize: 10,
			},
			total: 0,

			rowsData: [],
			dialogVisible: false,
			dialogVisible_pipeline: false, //管道数据
		};
	},

	created() {
		this.getList();
	},
	methods: {
		/** 查询角色列表 */
		async getList() {
			this.loading = false;
		},
		handleSelectionChange(val) {
			this.rowsData = val;
			if (val.length > 0) {
				this.single = false;
				this.multiple = false;
			} else {
				this.multiple = true;
				this.single = true;
			}
		},
		handleSizeChange(val) {
			this.listQuery.pageIndex = 1;
			this.listQuery.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.listQuery.pageIndex = val;
			this.getList();
		},
		handlePublishStatusChange(index, data) {
			let obj = { id: [data.id], opinion: '' };

			if (data.status) this.$store.dispatch('auction/PublishUserBidding', obj);
			if (!data.status) this.$store.dispatch('auction/RevokeUserBidding', obj);
		},

		/** 搜索按钮操作 */
		handleQuery() {
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.listQuery = {
				pageIndex: 1,
				pageSize: 10,
			};
		},

		/** 新增按钮操作 */
		handleAdd() {
			this.$router.push({ path: '/auction/add' });
		},

		/** 修改按钮操作 */
		handleUpdate(row) {
			if (row.length > 1) return this.$message({ message: '请选择一条数据', type: 'warning' });
			this.$store.commit('publics/SET_AUCTIONROWDATA', row[0]);
			this.$router.push({ path: '/auction/updata' });
		},

		/** 删除  */
		async handleDelete(data) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const obj = { id: [] };
					data.forEach((e) => obj.id.push(e.id));
					await this.$store.dispatch('auction/DeleteBiddingInfo', obj);
					this.getList();
				})
				.catch(() => {});
		},
		// 竞价列表
		async handleBidding(row) {
			if (row.length > 1) return this.$message({ message: '请选择一条数据', type: 'warning' });
			let obj = {
				pageSize: 10000,
				pageIndex: 1,
				biddingId: row[0].id,
			};
			const data = await this.$store.dispatch('auction/GetUserAuctionList', obj);
			if (data.code == 200) this.tableData_bidding = data.data;
			this.dialogVisible_bidding = true;
		},
		beforeClose(done) {
			done();
		},
		updateTimeFormatter(row) {
			return moment(row.updateTime).format('YYYY-MM-DD HH:mm:ss');
		},
		handleBatchImport() {},
		handleExport() {},
		handlePipeline() {
			this.dialogVisible_pipeline = true;
			this.dialogVisible_pipeline = true;
		},
		handleClose() {
			this.dialogVisible_pipeline = false;
		},
	},
};
</script>
<style lang='scss' scoped>
.main {
	padding: 10px;
}
.handleP {
	display: flex;
	justify-content: center;
	align-items: center;
	i {
		font-size: 20px;
	}
	img {
		width: 25px;
		height: 25px;
		margin: 0 3px;
	}
}
</style>